import React, { useState } from 'react';
import ImageUploader from './ImageUploader'

const TsImageUploader = (props) => {
    const [uploadedImages, setUploadedImages] = useState([]);
     const [uploadedJson, setUploadedJson] = useState(null);

  const handleUploadSuccess = (response, fileList) => {
    console.log('上传成功:', response);
    setUploadedJson(JSON.stringify(response))
    
    // 假设服务器返回格式为 { success: true, data: { urls: [...] } }
    if (response.success && response.data && response.data.urls) {
      setUploadedImages(prev => [...prev, ...response.data.urls]);
    }
  };

  const handleUploadError = (error) => {
    console.error('上传失败:', error);
    // 可以显示错误提示给用户
  };
  return (
    <>
     <ImageUploader 
              buttonText="添加照片"
              modalTitle="上传照片到相册"
              action="http://10.0.0.215:34423/parstool/upload?modelId=PP-OCRv5"  // 你的上传接口地址
              data={{ type: 'user-gallery' }}  // 额外参数
              onUploadSuccess={handleUploadSuccess}
              onUploadError={handleUploadError}
            />
              {uploadedImages.map((url, index) => (
                      <img 
                        key={index} 
                        src={url} 
                        alt={`uploaded-${index}`} 
                        style={{ width: '100px', height: '100px', margin: '5px' }}
                      />
                    ))}
                    uploadedJson:{uploadedJson}
    </>
  )
};

TsImageUploader.displayName = 'TsImageUploader';

export default TsImageUploader;